<?php
require_once 'common/config.php';
require_once 'common/functions.php';

// 检查登录状态
check_login();

$db = db_connect();

// 获取轮播图列表
$stmt = $db->query("SELECT * FROM banners ORDER BY sort_order ASC");
$banners = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 检查是否已达到最大数量限制
$can_add = count($banners) < 5;
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图管理 - <?php echo SITE_NAME; ?></title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
    .banner-image {
        width: 200px;
        height: 100px;
        object-fit: cover;
        border-radius: 4px;
        cursor: pointer;
        transition: transform 0.2s;
    }
    .banner-image:hover {
        transform: scale(1.05);
    }
    .sort-handle {
        cursor: move;
        color: #666;
    }
    .sort-input {
        width: 60px;
        text-align: center;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <?php include 'includes/sidebar.php'; ?>
        
        <div class="main-content">
            <header class="top-header">
                <div class="header-left">
                    <h2>轮播图管理</h2>
                </div>
                <div class="header-right">
                    <?php if ($can_add): ?>
                    <a href="banner_add.php" class="btn btn-primary">
                        <i class="fas fa-plus"></i> 添加轮播图
                    </a>
                    <?php else: ?>
                    <button class="btn btn-secondary" disabled title="最多只能添加5张轮播图">
                        <i class="fas fa-plus"></i> 添加轮播图
                    </button>
                    <?php endif; ?>
                </div>
            </header>

            <div class="content">
                <div class="data-table">
                    <table>
                        <thead>
                            <tr>
                                <th>排序</th>
                                <th>图片</th>
                                <th>标题</th>
                                <th>链接</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($banners as $banner): ?>
                            <tr>
                                <td>
                                    <input type="number" class="sort-input" 
                                           value="<?php echo $banner['sort_order']; ?>"
                                           data-id="<?php echo $banner['id']; ?>"
                                           min="1" max="5">
                                </td>
                                <td>
                                    <img src="<?php echo '../api/user/' . htmlspecialchars($banner['image_url']); ?>" 
                                         class="banner-image" 
                                         alt="轮播图"
                                         onclick="showImage(this.src)">
                                </td>
                                <td><?php echo htmlspecialchars($banner['title']); ?></td>
                                <td><?php echo htmlspecialchars($banner['link_url']); ?></td>
                                <td>
                                    <span class="badge <?php echo $banner['status'] == 1 ? 'badge-success' : 'badge-danger'; ?>">
                                        <?php echo $banner['status'] == 1 ? '启用' : '禁用'; ?>
                                    </span>
                                </td>
                                <td>
                                    <a href="banner_edit.php?id=<?php echo $banner['id']; ?>" class="btn-icon" title="编辑">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="javascript:void(0)" onclick="deleteBanner(<?php echo $banner['id']; ?>)" 
                                       class="btn-icon text-danger" title="删除">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 图片预览模态框 -->
    <div id="imageModal" class="modal" onclick="this.style.display='none'">
        <img id="modalImage" class="modal-content">
    </div>

    <script>
    // 图片预览
    function showImage(src) {
        const modal = document.getElementById('imageModal');
        const modalImg = document.getElementById('modalImage');
        modal.style.display = "block";
        modalImg.src = src;
    }

    // 删除轮播图
    function deleteBanner(id) {
        if (confirm('确定要删除这张轮播图吗？')) {
            window.location.href = `banner_delete.php?id=${id}`;
        }
    }

    // 排序处理
    document.querySelectorAll('.sort-input').forEach(input => {
        input.addEventListener('change', function() {
            const id = this.dataset.id;
            const sort = this.value;
            
            fetch('banner_sort.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `id=${id}&sort=${sort}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('排序更新失败');
                }
            });
        });
    });
    </script>

    <style>
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        padding-top: 50px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.9);
        cursor: pointer;
    }

    .modal-content {
        margin: auto;
        display: block;
        max-width: 80%;
        max-height: 80%;
    }
    </style>
</body>
</html> 